<template>
  <div class="system-edit-role-container">
    <el-dialog
        draggable :title="state.editType === 'save'? `新增` : `积分排行榜`" v-model="state.isShowDialog" width="50%">
      <el-form :model="state.form" :rules="state.rules" label-width="90px" ref="formRef" inline>
        <el-row :gutter="0">
          <!--          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">-->
          <el-form-item label="积分等级" prop="point_level">
            <el-input v-model="state.listQuery.point_level" placeholder="请选择积分等级" clearable></el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" class="ml10" @click="getPointsRank">查询</el-button>
          </el-form-item>
          <el-form-item>
            <z-table
                :columns="state.points_rank_columns"
                :data="state.PointsRankTableListData"
                ref="PointsRankTableRef"
                v-model:page-size="state.listQuery.pageSize"
                v-model:page="state.listQuery.page"
                :total="state.Total"
                @pagination-change="getPointsRank"
            />
          </el-form-item>
          <!--          </el-col>-->

        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PointsRank">
import {reactive, ref} from 'vue';
import {ElButton, ElMessage} from "element-plus";
import {userApplyDetailApi} from "/@/api/point_management/point_report"

const emit = defineEmits(['getList'])

let createForm = () => {
  return {
    id: null,
    participant_user_name: '弹窗',
    point_level: '10',
    participant_user_number: null,
    award_deduction_value: null,
    award_deduction_value_sum: null,
  }
}
const formRef = ref()
const PointsRankTableRef = ref()
const state = reactive({
  editType: null,
  isShowDialog: false,
  form: createForm(),
  PointsRankTableListData: [],
  rules: {
    point_level: [{required: true, message: '请选择积分等级', trigger: 'blur'},],
  },
  points_rank_columns: [
    {key: 'participant_user_name', label: '员工姓名', width: '', align: 'center', show: true},
    {key: 'participant_user_number', label: '员工工号', width: '', align: 'center', show: true},
    {key: 'point_level', label: '积分等级', width: '', align: 'center', show: true},
    {key: 'award_deduction_value_sum', label: '总分数', width: '', align: 'center', show: true},
  ],
  Total: 0,
  listQuery: {
    page: 1,
    pageSize: 10,
    participant_user_name: '',
    point_level: 10,
    award_deduction_type: null,
  }
});
// 打开弹窗
const openDialog = (row) => {
  if (row) {
    console.log('打开弹窗了222')
    getPointsRank()
    // state.form = JSON.parse(JSON.stringify(row));
  } else {
    state.form = createForm()
  }
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
//获取排行榜
const getPointsRank = () => {
  console.log('获取排行榜数据接口')
  // PointsRankTableRef.value.openLoading()
  userApplyDetailApi().points_rank(state.listQuery)
      .then(res => {
        state.PointsRankTableListData = res.data.rows
      })
      .finally(() => {
        PointsRankTableRef.value.closeLoading()
      })
};

defineExpose({
  openDialog,
  getPointsRank
})
</script>

<style scoped lang="scss">
.system-edit-role-container {
  .menu-data-tree {
    border: var(--el-input-border, var(--el-border-base));
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    padding: 5px;
  }
}
</style>
